<template>
    <el-container>
        <el-aside id="userAsideLeft" class="tree-scroll w250">
            <el-input placeholder="输入机构名称进行过滤" v-model="filterText">
            </el-input>
            <el-tree class="flow-tree" :filter-node-method="filterNode" :props="defaultProps" :data="treeData"
                node-key="id" @node-click="handleClickOrg" ref="orgTree" :render-content="renderContent"
                :default-expanded-keys="[currentNodeData.id]">
            </el-tree>
        </el-aside>
        <el-main class="pdl-10 pdr-0 pdt-0 pdb-0">
            <!-- 搜索条件 -->
            <el-card>
                <MyForm  ref="myFormRef" :configs="configs" @onSearch="search" @onReset="search" :btnConfig="{ Sapn: 6,span: 6 }"></MyForm>
            </el-card>
            <div class="pdl-10 pdr-10 pdt-10 pdb-10 bgc-white mgt-10">
                <div>
                    <el-button type="success" icon="el-icon-plus"  size="mini">新增</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser">删除</el-button>
                    <el-button class="fr" icon="el-icon el-icon-top" size="mini" @click="importUser">导入</el-button>
                    <el-button class="fr" type="primary" icon="el-icon-download" size="mini" @click="exportUser">导出</el-button>
                </div>
                <MyTable class="mgt-10" ref="tableRef" :headerCellStyle="headerCellStyle" :cellStyle="cellStyle" :table-data="tableData"
                    :columns="columns" :pagination="pagination" :total="total" @pageChange="loadData" row-key="fxTid" @selection-change="selectChange">
                    <template #_front>
                        <el-table-column align="center" type="selection" width="50" reserve-selection> </el-table-column>
                    </template>
                    <template #_end>
                        <el-table-column label="操作" width="220" fixed="right">
                            <template slot-scope="scope">
                                <span class="color-blue fs-4"><i class="el-icon el-icon-refresh" />重置密码</span>
                                <span class="mgl-5 color-blue"><i class="el-icon el-icon-edit" />编辑</span>
                                <span class="mgl-5 color-blue"><i class="el-icon el-icon-delete" @click="deleteUser(scope.row)"/>删除</span>
                            </template>
                        </el-table-column>
                    </template>
                </MyTable>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import { userList, getOrgListAll,userDelete } from '@/api/user';
import { getAllRole } from '@/api/role';
import mixins from '@/mixins/table.js';
export default {
  name: 'User',
  mixins: [mixins],
  props: {

  },
  components: {

  },
  data() {
    return {
        filterText: '',
        currentNodeData: {
            title: '',
            trackSet: false,
            id: ''
        },
        userData: [],
        // 请求数据参数
        formInlineQuery: {
            personName: '',
            number: '',
            basicData: ''
        },
        defaultProps: {
            children: 'children',
            label: 'title'
        },
        treeData: [],
        configs: [
            { span: 6, labelWidth:'80px', label: '关键字', key: 'personName', type: 'input',placeholder:'请输入员工姓名/编码/手机号' },
            { span: 4, labelWidth:'60px', label: '状态', key: 'status', type: 'select', options: [{label:'启用',value:'0'},{label:'禁用',value:'1'}], multiple: false  },
            { span: 8, labelWidth:'100px', label: '创建时间', key: 'createTime', type: 'daterange',  },

        ],
        columns: [
            { label: '员工编码', prop: 'fnumber'},
            { label: '员工名称', prop: 'fpersonName' },
            { label: '性别', prop: 'signTime'},
            { label: '部门', prop: 'fadminName' },
            { label: '手机号', prop: 'approveReason' },
            { label: '状态', prop: 'approveReason' },
            { label: '创建时间', prop: 'fcreateTime',width:'120px' }
      ],
      selectdata:[], // 复选框选中的值
    };
  },
  computed: {

  },
    created() {
    this.loadOrg();
    this.initRoleOption();
    this.loadData()
  },
  mounted() {

  },
  methods: {
    // 选择复选框事件
    selectChange(val) {
      this.selectdata = val
    },
    // 获取角色列表
    initRoleOption(){
      this.loading = true;
      getAllRole({}).then(({data})=>{
        this.loading = false;
        if(data.code === 0){
          this.roleOption = data.data;
        }else{
          this.$message.error(data.msg)
        }
      });
  },
  // 删除用户
  deleteUser(row) { 
      if(row.fid){
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          userDelete({id:row.id}).then(({data})=>{
            this.loading = false;
            if (data.code === 0) {
              this.$message.success('删除成功')
              this.loadData()
            }
          })
        })
      } else {
        if (this.selectdata.length == 0) {
          return this.$message.error('请至少选择一个员工')
        }
        userDelete(this.selectdata).then(({data})=>{
          if (data.code === 0) {
            this.$message.success('删除成功')
            this.loadData()
          }
        })
      }
  },
  search(a) {
    console.log(a);
    this.formInlineQuery.personName = a.personName
    this.loadData();
  },
  // 获取数据方法
  loadData() {
    this.loading = true;
    //获取用户列表
    userList({...this.formInlineQuery,...this.pagination}).then(({data}) => {
        this.loading = false
        if (data.code !=0) {
          return this.$message.error(data.msg)
        }
        this.tableData = data.data.list
        this.total = data.data.total
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    renderContent(h, { node, data, store }) {
      if(data.trackSet){
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span style="color:red">（参与)</span>
          </span>
        );
      }else{
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
          </span>
        );
      }
  },
  handleClickOrg(data, checked, node) {
      this.currentNodeData.id = data.id;
      this.currentNodeData.title = data.title;
      this.currentNodeData.trackSet = data.trackSet;
      this.formInlineQuery.basicData = data.basicData;
      this.formInlineQuery.page = 1;
      this.loadData();
    },
    // 加载组织
    loadOrg(){
      this.filterText='';
      this.loading = true;
      getOrgListAll({}).then(({data}) => {
        this.loading = false;
        if(data.code === 0){
          this.treeData = data.data;
          this.currentNodeData.id = data.data[0].id;
          this.currentNodeData.title = data.data[0].title;
          this.currentNodeData.trackSet = data.data[0].trackSet;
        }else{
          this.$message.error(data.msg)
        }
      });
    },
    // 导入用户
    importUser() {
      
    },
    exportUser() {
      
    }
  },
}
</script>

<style scoped lang="scss">

</style>